<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="MenuCss.aspx.vb" Inherits="Samples_MenuCss" title="Menu Css" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeaderPlaceHolder" Runat="Server">
    <link href="../css/menu.css" type="text/css" rel="stylesheet" />
    <link href="MenuCss.aspx.css" type="text/css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <p class="sampledescription">
        Both menus have have the same automatic css assigned.  However, the root class for the behavior
        is different in each (menu1 and menu2).  In order to apply specific css to each item the selector
        is limited to the first menu by prefixing with the .menu1 class.  For example, all first menu items have
        the italic font applied by specifying <font face="courier new">.menu1 .first { font-style: italic; }</font>.  Similarly,
        all last items are underlined via <font face="courier new">.menu1 .last { text-decoration: underline; }</font>.
        Each individual menu item is selected by its coordinate prefixed with mi.  For example, to access the File->New->Project
        the class specified is <font face="courier new">.menu1 .mi0-0-1 {background-color: #ccff66; }</font>.  Since it is in the 
        first menu (0), first child (0), then second in list (1).
        <br />
        <br />
        Finally, each submenu can have css applied to it as a whole.  The menu bar (root) has always been able to be styled through the
        MenuBarCssClass.  However, individual menu bars have not, they could only be styled as a whole through the MenuCssClass.  Now
        you can access each menu bar by using the same coordinate logic as the menu items, only these will be prefixed by m.
        For example, menu2 has its second menu specified with a background-color of green. (remember, the coordinates are zero based) 
        <font face="courier new">.menu2 .m1 { background-color: green; }</font>
    </p>

    <DNN:DNNMenu id="DNNMenu1" BehaviorID="Menu1" runat="server" SystemImagesPath="~/Images/" PopulateNodesFromClient="true" RenderMode="normal" 
        rootarrowimage="~/Images/icon_arrow_right-sm.gif" childarrowimage="~/Images/icon_arrow_right-sm.gif" 
        Animation-AnimationType="Slide" Animation-EasingDirection="Out" Animation-EasingType="Expo" 
        MenuBarCssClass="menubar menu1" 
        MenuCssClass="submenu" 
        DefaultNodeCssClassOver="menuitemhover" 
        DefaultNodeCssClass="menuitem" 
        DefaultIconCssClass="menuicon" 
        DefaultChildNodeCssClass="menuitem menuitemchild" />
    
    <DNN:DNNMenu id="DNNMenu2" BehaviorID="Menu2" runat="server" SystemImagesPath="~/Images/" PopulateNodesFromClient="true" RenderMode="normal" 
        rootarrowimage="~/Images/icon_arrow_right-sm.gif" childarrowimage="~/Images/icon_arrow_right-sm.gif" 
        Animation-AnimationType="Slide" Animation-EasingDirection="Out" Animation-EasingType="Expo" 
        MenuBarCssClass="menubar menu2" 
        MenuCssClass="submenu" 
        DefaultNodeCssClassOver="menuitemhover" 
        DefaultNodeCssClass="menuitem" 
        DefaultIconCssClass="menuicon" 
        DefaultChildNodeCssClass="menuitem menuitemchild" />

</asp:Content>

